<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>EmployeeChart</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/js/echarts.min.js"></script>
</head>
<body>
<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">仓库组员(采购)业绩排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:65%;">
            <form class="layui-form" lay-filter="formTest">
                <label class="layui-form-label" style="width: 30%">日期范围:</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" placeholder=" 请选择时间 " style="width: 300px">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn1" style="margin-left: 6px;">立即查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
            <br/>
            <div id="box2" style="width: 98%;height:85%;"></div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">仓库组员(入库)业绩排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:70%;">
            <form class="layui-form" lay-filter="formTest">
                <label class="layui-form-label" style="width: 30%">日期范围:</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" placeholder=" 请选择时间 " style="width: 300px">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn2" style="margin-left: 6px;">立即查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>

            <div id="box1" style="width: 98%;height: 85%"></div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">仓库组员(出库)业绩排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:70%;">
            <form class="layui-form" lay-filter="formTest">
                <label class="layui-form-label" style="width: 30%">日期范围:</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test3" placeholder=" 请选择时间 " style="width: 300px">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn3" style="margin-left: 6px;">立即查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>

            <div id="box3" style="width: 98%;height: 85%"></div>
        </div>
    </div>
</div>

</body>
<script>
    //js方式获取本地时间+1天
    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    }

    layui.use(['laydate','layer','jquery','element'],function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //日期选择器(采购)
        var value1;
        laydate.render({
            elem: '#test1'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        //日期选择器(入库)
        var value2;
        laydate.render({
            elem: '#test2'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value2 = "";
            }
            ,done: function(value) {
                value2 = value;
            }
        });
        //日期选择器(出库)
        var value3;
        laydate.render({
            elem: '#test3'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value3 = "";
            }
            ,done: function(value) {
                value3 = value;
            }
        });
        //根据时间查询(采购)
        $("#serachBtn1").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartTwo();
        });

        //根据时间查询(入库)
        $("#serachBtn2").on("click",function () {
            if (value2 == "" || value2 == undefined){
                value2 = "";
            }
            showChartOne();
        });

        //根据时间查询(出库)
        $("#serachBtn3").on("click",function () {
            if (value3 == "" || value3 == undefined){
                value3 = "";
            }
            showChartThree();
        });

        $(function () {
            value1="";
            value2="";
            value3="";
            showChartOne();
            showChartTwo();
            showChartThree();
        })

        //入库表
        function showChartOne(){

            var myChart = echarts.init(document.getElementById('box1'));
            var show;

            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '仓库组员(入库)业绩排行',
                    subtext: show
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookChart/queryEmpInStorageCount",    //请求发送到TestServlet处
                data: {"valuedate2":value2+""},
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].pname+" 工号："+result[i].uid);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].icount);
                        }

                        //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
                        if(names.length===0 && nums.length===0){
                            show='您查询的时间范围内暂无审核通过的入库数据';
                        }else {
                            show='仅包含审核通过的订单';
                        }

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title:{
                                subtext:show
                            },
                            xAxis: {
                                data: names
                            },
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: names,
                                    data: nums
                                },
                            ]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("员工入库业绩图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });
        };
        //采购表
        function showChartTwo() {
            var chartDom = document.getElementById('box2');
            var myChart = echarts.init(chartDom);
            var option;
            var show;

            option = {
                title: {
                    text: '仓库组员(采购)业绩排行',
                    subtext: show,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '业绩详情',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookChart/queryEmpPurStorageCount",    //请求发送到TestServlet处
                data: {"valuedate1":value1+""},
                success : function(result) {

                    //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
                    if(result.length===0){
                        show='您查询的时间范围内暂无审核通过的采购数据';
                    }else {
                        show='仅包含审核通过的订单';
                    }

                    myChart.setOption({        //填入数据
                        title:{
                          subtext:show
                        },
                        legend: {
                            data: result.uid
                        },
                        series: [{
                            data: (function(){
                                var rs = [];
                                for(var res=0;res<result.length;res++){
                                    rs.push({
                                        name :result[res].pname+" 工号："+result[res].uid,
                                        value:result[res].pcount
                                    });
                                }
                                return rs;
                            })()
                        }]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("员工采购业绩图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };
        //出库表
        function showChartThree() {
            var myChart = echarts.init(document.getElementById('box3'));
            var show;
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '仓库组员(出库)业绩排行',
                    subtext: '仅包含审核通过的订单'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookChart/queryEmpOutStorageCount",    //请求发送到TestServlet处
                data: {"valuedate3":value3+""},
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].pname+" 工号："+result[i].uid);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].ocount);
                        }

                        //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
                        if(names.length===0 && nums.length===0){
                            show='您查询的时间范围内暂无审核通过的出库数据';
                        }else {
                            show='仅包含审核通过的订单';
                        }

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title:{
                                subtext:show
                            },
                            xAxis: {
                                data: names
                            },
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: names,
                                    data: nums
                                },
                            ]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("员工出库业绩图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };
    });
</script>
</html>
